Vue.component('comd-input', {
  template:
    `
<div style="display: flex">
  <slot></slot>
 <el-input 
     v-model="innerVal" 
     @change="handleChange"
     size="small"
 ></el-input>
  <el-select
      size="small"
      v-model="unit" 
      placeholder="请选择"
      style="width: 90px"
      @change="fireCom(innerVal)"
  >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
</div>
` ,
  props: {
    value: null,
    units: Array
  },
  data() {
    return {
      unit: this.units[0],
      innerVal: this.parseValue(this.value),
      options: this.units.map(v => {
        return {
          label: v,
          value: v
        }
      })
    }
  },

  methods: {
    handleChange(value) {
      // this.number = value
      this.fireCom(value)
    },
    getValue(value) {
      if (this.unit === 'url') {
        return `url(${value})`
      }
      return value
    },
    parseValue(v) {
      let _val = v.trim()
      if (_val.startsWith('url(')) {
        let s = _val.replace('url(', '')
        return s.slice(0, s.length - 1)
      }
      return v
    },
    fireCom(value) {
      this.$emit('change', this.getValue( value ))
    }
  },
})

Vue.component('comd-demo', {
  template:
    `
<div>
  <h3>地址选择</h3>
  <div>{{model}}</div>
  <div>{{parsedModel}}</div>
  <comd-input :value="model.url"
               :units="['url']"
               @change="onFormChange('url', $event)">
  </comd-input>
</div>
`,
  data() {
    return {
      model: {
        url: 'url(http://sdsdss)',
      },
      parsedModel: {}
    }
  },
  methods: {
    onFormChange(key, e) {
      // console.log(key, e)
      this.$nextTick(() => {
        this.$set(this.parsedModel, key, e)
      })
    }
  },
})
